<template>
  <div>
    <div class="layout" :class="messageOwnership()">
      <BadgeItem @handleMenuClick="$emit('handleMenuClick')" :type="message.type">
        <div class="transfer" @click="$emit('user-share-click')">
          <MessageItemIcon :url="message.assetIcon" />
          <div class="content">
            <span class="amount">{{message.snapshotAmount}}</span>
            <div class="bottom">
              <span class="symbol">{{message.assetSymbol}}</span>
              <span class="time">{{message.lt}}</span>
            </div>
          </div>
        </div>
      </BadgeItem>
    </div>
  </div>
</template>
<script lang="ts">
import MessageItemIcon from '@/components/MessageItemIcon.vue'
import BadgeItem from './BadgeItem.vue'

import { MessageStatus } from '@/utils/constants'
import { Vue, Prop, Component } from 'vue-property-decorator'

@Component({
  components: {
    MessageItemIcon,
    BadgeItem
  }
})
export default class TransferItem extends Vue {
  @Prop(Object) readonly conversation: any
  @Prop(Object) readonly message: any
  @Prop(Object) readonly me: any

  MessageStatus: any = MessageStatus

  messageOwnership() {
    return {
      send: this.message.userId === this.me.user_id,
      receive: this.message.userId !== this.me.user_id
    }
  }
}
</script>
<style lang="scss" scoped>
.layout {
  display: flex;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  .transfer {
    padding: 0.75rem;
    background: white;
    display: flex;
    flex-direction: row;
    align-content: center;
    min-width: 10rem;
    border-radius: 0.4rem;
    box-shadow: 0px 1px 1px #77777733;
    .content {
      display: flex;
      flex: 1;
      flex-direction: column;
      text-align: start;
      overflow: hidden;
      .bottom {
        display: flex;
        justify-content: space-between;
        .symbol {
          color: #888888cc;
          font-size: 0.8rem;
          margin-top: 0.375rem;
          min-height: 1rem;
        }
        .time {
          position: absolute;
          color: #8799a5;
          display: flex;
          float: right;
          font-size: 0.75rem;
          bottom: 0.3rem;
          right: 0.2rem;
          align-items: flex-end;
        }
      }
    }
  }
}
.layout.send {
  flex-direction: row-reverse;
}
.layout.receive {
  flex-direction: row;
}
</style>
